<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>upp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" th:href="@{/front/js/layui/css/layui.css}" type="text/css">
</head>
<body>

<form class="layui-form" th:action="@{/house/update}" style="padding-top: 10px; padding-right: 50px;">
    <input hidden name="hid" th:value="${param.hid}">
    <!--标题-->
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" th:value="${param.title}" required lay-verify="required" placeholder="请输入标题"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--宣传图（单图）-->
    <div class="layui-form-item">
        <label class="layui-form-label">宣传图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">上传</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-upload-list">
                <!--@{/front/img/home-detail/1.jpg}-->
                <!--<p>[[${#httpServletRequest.getContextPath()}+'/'+${param.img}]]</p>-->
                <img id="demo1" class="layui-upload-img"
                      width="100px"/>
            </div>
        </div>
    </div>
    </div>

    <!--详情图-->
    <div class="layui-form-item">
        <label class="layui-form-label">详情图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test2">上传</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-upload-list" id="demo2">
                <th:block th:each="img,array:${#strings.arraySplit(param.images,',')}">
                    <!--<p>[[${#httpServletRequest.getContextPath()}+'/'+${img}]]</p>-->
                    <img class="layui-upload-img" th:src="${#httpServletRequest.getContextPath()}+'/'+${img}"
                         width="100px">
                </th:block>
            </div>
        </div>
    </div>

    <!--城市-->
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="city" id="city" required th:value="${param.city}" lay-verify="required" placeholder="请输入城市"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--租金-->
    <div class="layui-form-item">
        <label class="layui-form-label">租金</label>
        <div class="layui-input-inline">
            <input type="text" name="rent" required th:value="${param.rent}" lay-verify="required" placeholder="例如“123”"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">(¥/月)</div>
    </div>

    <!--面积-->
    <div class="layui-form-item">
        <label class="layui-form-label">面积</label>
        <div class="layui-input-block">
            <input type="text" name="area" required th:value="${param.area}" lay-verify="required" placeholder="例如“20平”"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--房屋类型-->
    <div class="layui-form-item">
        <label class="layui-form-label">房屋类型</label>
        <div class="layui-input-block">
            <input type="text" name="type" required th:value="${param.type}" lay-verify="required" placeholder="房屋类型"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--出租方式-->
    <div class="layui-form-item">
        <label class="layui-form-label">租房方式</label>
        <div class="layui-input-block">
            <input type="radio" name="mode" value="合租" id="a" title="合租" checked>
            <input type="radio" name="mode" value="整租" id="b" title="整租">
        </div>
    </div>

    <!--房屋说明-->
    <div class="layui-form-item">
        <label class="layui-form-label">房屋说明</label>
        <div class="layui-input-block">
            <input type="text" name="explain" required th:value="${param.explain}" lay-verify="required"
                   placeholder="房屋说明"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--配套设施-->
    <div class="layui-form-item">
        <label class="layui-form-label">配套设施</label>
        <div class="layui-input-block">
            <input type="text" name="facilities" required th:value="${param.facilities}" lay-verify="required"
                   placeholder="配套设施" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--交通情况-->
    <div class="layui-form-item">
        <label class="layui-form-label">交通情况</label>
        <div class="layui-input-block">
            <input type="text" name="trafficInfo"  th:value="${param.trafficInfo}" required lay-verify="required"
                   placeholder="交通情况" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--地址-->
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input type="text" name="address" id="address" th:value="${param.address}" required
                   lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div id="container" style="width: 700px; height: 500px;"></div>
        </div>
    </div>

    <!--提交、重置按钮-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=AyI4O6S4sfPiP2gGaoGBAQq6Uy25Xt8Y"></script>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['form', 'upload', 'jquery'], function () {
        let form = layui.form;
        let upload = layui.upload;
        let $ = layui.jquery;
        let cxtPath =  /*[[@{/}]]*/'';
        let imgSrc = [[${param.img}]];
        $('#demo1').attr('src',`${cxtPath}${imgSrc}`)
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url: $('form').attr('action'),
                type: 'POST',
                cache: false,
                data: new FormData($('form')[0]),
                processData: false,
                contentType: false,
                success: function (result) {

                    parent.layui.table.reload("demo", {
                        page: {curr: 1}
                    });
                    //上传成功后的回调方法
                    let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            });
            return false;
        });

        //宣传图上传
        upload.render({
            elem: '#test1'
            , field: 'fileImg'
            , auto: false
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
        });


        //详情图上传
        let uploadInst = upload.render({
            elem: '#test2'
            , field: 'fileArr'
            , auto: false
            , multiple: true
            , choose: function (obj) {
                $('#demo2').empty();
                obj.preview(function (index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" width="100px">')
                });
            }
        });
        //地图
        let addressArr = [[${param.address}]];
        let areaIndex = addressArr[0].indexOf('区'); //得到某某区的下标
        let place = addressArr[0].substring(areaIndex+1)  //从区后面截取详细地点
        let map = new BMapGL.Map("container");
        let gc = new BMapGL.Geocoder();
        let addressInput = $('#address');
        let city = [[${param.city}]];

        $('#city').blur(()=>{
            city = $('#city').val()
        })

        gc.getPoint(place, function(point) {
            if (point) {
                map.centerAndZoom(point, 18);
                let marker = new BMapGL.Marker(point);
                map.addOverlay(marker);
            } else {
                alert("您选择地址没有解析到结果!");
            }
        },city);

        addressInput.blur(()=>{//输入框失去焦点时
            let address = addressInput.val();
            //清除地图上所有的覆盖物
            map.clearOverlays();
            gc.getPoint(address, function(point){
                if (point) {
                    map.centerAndZoom(point, 18);
                    let marker = new BMapGL.Marker(point);
                    map.addOverlay(marker);
                    //根据输入的地址解析成详细地址
                    gc.getLocation(point, function(rs){
                        //alert(`${rs.address}${address}(${point.lng},${point.lat}`)
                        addressInput.val(`${rs.address}${address}`);
                    });
                }else{
                    alert("您选择地址没有解析到结果!");
                }
            }, city);
        })

        //地图点击事件
        map.addEventListener('click', function(e) {
            //清除地图上所有的覆盖物
            map.clearOverlays();
            let pt = e.latlng;
            let marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
            map.addOverlay(marker);
            gc.getLocation(pt, function(rs){
                addressInput.val(`${rs.address}`);
            });
        });

    });
</script>
</body>
</html>
